<template>
  <view class="container">
    <NavBar
      v-if="isCollection"
      title="文件详情"
      :iconClass="baseFormData.isChoose ? 'icon-xingxing1' : 'icon-shoucang'"
      @clickRightFn="clickRightFn"
    />
    <NavBar v-else title="文件详情" />
    <view class="container-item">
      <uni-forms
        ref="baseForm"
        :modelValue="baseFormData"
        labelWidth="100px"
        label-position="left"
      >
        <uni-forms-item label="上传人" class="dis_textRight">
          <text>{{ baseFormData.userName }}</text>
        </uni-forms-item>

        <uni-forms-item label="标题" class="dis_textRight">
          <text>{{ baseFormData.title }}</text>
        </uni-forms-item>

        <!-- <uni-forms-item label="封面" class="dis_textRight" v-if="baseFormData.Type != '学习心得'">
          <view
            class="upload_btn"
            style="width: 200rpx; height: 132rpx"
            v-if="baseFormData.seriesCoverUrl && baseFormData.seriesCoverUrl.length"
          >
            <view
              v-for="(i, index) in baseFormData.seriesCoverUrl"
              :key="index"
              @click="prePic(i)"
            >
              <image :src="i" style="width: 200rpx; height: 132rpx"> </image>
            </view>
          </view>
          <view class="upload_btn" style="width: 200rpx; height: 132rpx" v-else>
            <view :key="index" @click="prePic(imgSrc)">
              <image :src="imgSrc" style="width: 200rpx; height: 132rpx">
              </image>
            </view>
          </view>
        </uni-forms-item> -->

        <uni-forms-item label="学习类型" class="dis_textRight">
          <text>{{ baseFormData.Type }}</text>
        </uni-forms-item>
        <uni-forms-item label="文件"> </uni-forms-item>
        <view v-if="baseFormData.fileUrl && baseFormData.fileUrl.length">
          <view
            v-if="!baseFormData.number"
            class="file_list"
            v-for="(item, index) in baseFormData.fileUrl"
            :key="index"
          >
            <view
              style="display: flex; align-items: center; color: #0b847b"
              @click="prevFileClick(item)"
            >
              <view>{{
                item.accessoryName ? item.accessoryName : item.name
              }}</view>
            </view>
          </view>
          <view v-else class="file_list">
            <view style="display: flex; align-items: center; color: #0b847b">
              <view>
                <text
                  v-for="(i, index) in baseFormData.fileUrl"
                  :key="index"
                  @click="prevFileClick(i)"
                >
                  {{ item.accessoryName ? item.accessoryName : item.name }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <uni-forms-item label="上传时间" class="dis_textRight">
          <text>{{ baseFormData.createTime }}</text>
        </uni-forms-item>

        <view style="padding-top: 20px"></view>
        <view class="btns" v-if="this.baseFormData.flag">
          <button
            class="publish"
            style="width: 700rpx"
            :disabled="disabledPublish"
            :loading="publishLoading"
            @click="delInfo"
          >
            删 除
          </button>
          <!-- <button
            class="publish"
            style="width:300rpx; background: #3B95FF"
            :disabled="disabledPublish"
            :loading="publishLoading"
            @click="downloadFile"
          >
            下 载
          </button> -->
        </view>
        <view style="padding-top: 20px"></view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
// 接口
import {
  apiDeleteUploadXue, //删除
  apiCollect, //6 收藏
  apiDelCollection, //9 取消收藏
  apiCollectionList, // 10 收藏列表
} from "../../net/educationalLearning.js";

import {
  previewPic, // 预览图片
  getDateFn, // 获取当前时间 年月日
} from "../../utils/fun.js";
import {
  prevFile, // 预览文件
} from "../../utils/preview.js";
import { serverUrl2, uploadconfig2 } from "../../const";

import NavBar from "@/components/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      uploadconfig2,
      option: {
        url: uploadconfig2.url,
        name: "file",
        header: {
          Authorization: uni.getStorageSync("token"),
          platform: "APP",
        },
        formData: {},
      },
      imgSrc: "../../static/dangjian/no-pic.png",

      // ------------------
      isCollection: true,
      whetherVideosArr: [], // 多个视频链接
      fileAccept: "", //上传文件格式限制
      imgWidth: 200,
      imgHeight: 132,
      range2: [], //学习类型
      uploadURL: "/masses/common/upload", // 上传接口地址
      formPage: "", // 来自哪个页面
      disabledPublish: false,
      publishLoading: false,
      // 文件回显列表
      files: new Map(),
      suffix: "", //后缀名
      baseFormData: {},
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    console.log(options.isShowCollec);
    if (options.isShowCollec && options.isShowCollec == "false") {
      this.isCollection = false;
    }
    console.log("11");
    console.log(uni.getStorageSync("itemParams"));
    console.log(this.baseFormData);
    console.log("22");
    setTimeout(() => {
      this.baseFormData = JSON.parse(uni.getStorageSync("itemParams"));
      console.log("33");
      // 封面
      console.log(this.baseFormData);
      this.baseFormData.seriesCoverUrl =
        typeof this.baseFormData.seriesCoverUrl == "string"
          ? JSON.parse(this.baseFormData.seriesCoverUrl)
          : this.baseFormData.seriesCoverUrl;
      console.log("44");

      // 文件
      console.log(this.baseFormData.fileUrl, "..............");
      this.baseFormData.fileUrl = JSON.parse(this.baseFormData.fileUrl);

      console.log("55");
      // 连接
      this.baseFormData.url =
        typeof this.baseFormData.url == "string"
          ? JSON.parse(this.baseFormData.url)
          : this.baseFormData.url;
      console.log("66");

      // 时间
      this.baseFormData.createTime = getDateFn(this.baseFormData.createTime);
      this.getCollectionList();
      console.log("77");
    }, 450);
  },
  methods: {
    uniShowToast(title, icon = "success", duration = 1500) {
      uni.showToast({
        title,
        icon,
        mask: true,
        duration,
      });
    },

    // 下载文件
    downloadFile() {},

    // 进行收藏
    collectionFn(data) {
      apiCollect(data)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.baseFormData.isChoose = true;
            this.uniShowToast("收藏成功");
            this.getCollectionList();
          } else {
            this.uniShowToast("收藏失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
          this.uniShowToast("收藏失败", "error");
        });
    },

    // 取消收藏
    cancelFavorite(collectId) {
      apiDelCollection(collectId)
        .then((res) => {
          if (res.code == 0) {
            this.uniShowToast("取消成功");
            delete this.baseFormData.collectId;
            delete this.baseFormData.isChoose;
            this.getCollectionList();
          } else {
            this.uniShowToast("取消失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
          this.uniShowToast("取消失败", "error");
        });
    },

    // 获取收藏列表
    getCollectionList() {
      let data = {
        learningType: this.baseFormData.learningType,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
      };
      apiCollectionList(data)
        .then((res) => {
          console.log(res);
          if (res.code == 0 && res.data.length > 0) {
            // this.collectionList = res.data;
            console.log(res.data);

            for (let i = 0; i < res.data.length; i++) {
              if (this.baseFormData.djStudyId == res.data[i].djStudyId) {
                this.baseFormData.collectId = res.data[i].collectId;
                this.baseFormData.isChoose = true;
              }
            }
          } else {
            this.collectionList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.collectionList = [];
        });
    },

    // 点击收藏或不收藏
    clickRightFn() {
      console.log(this.baseFormData);
      // isChoose true 进行取消收藏，false 进行收藏
      if (this.baseFormData.isChoose) {
        this.cancelFavorite(this.baseFormData.collectId);
      } else {
        let data = {
          collectCount: 1,
          userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
          djStudyId: this.baseFormData.djStudyId,
        };
        this.collectionFn(data);
      }
    },

    // 删除
    delInfo() {
      this.disabledPublish = this.publishLoading = true;
      apiDeleteUploadXue(this.baseFormData.djStudyId)
        .then((res) => {
          if (res.code === 0) {
            uni.showToast({
              title: "删除成功",
              icon: "success",
              mask: true,
              duration: 1000,
            });
            uni.navigateBack({
              delta: 1,
            });
          } else {
            uni.showToast({
              title: "删除失败",
              icon: "error",
              mask: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 预览上传的文件
    prevFileClick(item) {
      prevFile(item);
    },

    // 预览 图片
    prePic(url) {
      let arr = [url];
      previewPic(arr);
    },
  },
};
</script>

<style lang="scss">
	@import '@/static/common.scss';
::v-deep .icon-xingxing1 {
  color: #f2cb51 !important;
}

page {
  background: #fff;
  height: 100%;
  overflow-y: scroll;
}

.dis_textRight {
  display: flex;
  align-items: center;
  text-align: right;
}

/* 学习类型箭头 */
::v-deep .uni-popper__arrow {
  left: 80% !important;
  /* right: 10% !important; */
}

/* 多个视频单选框 */
::v-deep .uni-radio-input {
  width: 28rpx;
  height: 28rpx;
}

.upload_url {
  display: flex;
  align-items: center;
  margin-bottom: 14srpx;
}

.upload_url i {
  width: 50rpx;
  text-align: center;
  font-size: 40rpx;
}

/* 参与人员 1 */
.people_text {
  width: 700rpx;
  min-height: 100rpx;
  padding: 8rpx;
  box-sizing: border-box;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1rpx solid #d6dbe3;
  font-size: 30rpx;
  color: #0e1634;
  display: flex;
  flex-wrap: wrap;
}

.people_text view {
  margin-right: 16rpx;
}

::v-deep .uni-checkbox-input {
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
}

/* 参与人员 2 */

.form_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container-item {
  width: 700rpx;
  margin: 0 auto;
}

.btns {
  width: 700rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btns button {
  width: 700rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  text-align: center;
  color: #fff;
  font-size: 26rpx;
}

.publish {
  background: #e86565;
}

.file_list {
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 700rpx;
  min-height: 100rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1px solid #d6dbe3;
  margin-bottom: 10rpx;
}

/* 预览图片 */
.cover_pic {
  width: 200rpx;
  height: 132rpx;
  position: absolute;
  right: 0;
}

.cover_pic i {
  color: red;
  font-size: 36rpx;
  position: absolute;
  z-index: 100;
  right: 0;
  top: 0;
}

/* 参与人员 */
.join_peo {
  position: absolute;
  right: 0;
  width: 150rpx;
  height: 70rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #6a6a6a;
}

.picker_views {
  position: absolute;
  z-index: 100;
  top: 100rpx;
  width: 100%;
  height: 350rpx;
  background: #fff;
  border-radius: 8rpx;
  border: 2rpx solid #e5e5e5;
  text-align: center;
}

.upload_img {
  padding-top: 20rpx;
  box-sizing: border-box;
  width: 200rpx;
  height: 140rpx;
  background-color: rgba(214, 219, 227, 0.6);
  color: $themeColor;
  text-align: center;
}

.upload_img i {
  display: inline-block;
}

/* 活动内容 */
.textarea_con {
  margin-bottom: 20rpx;
  width: 700rpx;
  position: relative;
}

.textarea_text {
  margin: 0 auto;
  width: 700rpx;
  min-height: 220rpx;
  background: #f3f5f8 !important;
  border-radius: 8rpx;
  border: 1rpx solid #d6dbe3;
  padding: 20rpx;
  box-sizing: border-box;
}

.textarea_plac {
  font-size: 30rpx;
  font-weight: 500;
  color: #0e1634;
}

/* 上传封面 1 */
.upload_btn {
  background: #f3f5f8;
  border-radius: 8rpx;
  /* border: 1px solid #D6DBE3; */
  float: right;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.upload_btn .upload_text {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.upload_btn .upload_text view {
  width: 110% !important;
}

/* 上传封面 2 */

/* 重置样式 */
::v-deep .is-input-border,
::v-deep .uni-select,
::v-deep .uni-date-x--border {
  text-align: right;
  border: none !important;
}

::v-deep .uni-date {
  position: absolute;
  right: 0;
  /* 		width: 400rpx; */
}

::v-deep .icon-xiangxia1:before {
  content: "&#xe603;" !important;
}

::v-deep .uniui-calendar {
  position: absolute;
  right: 0;
}

::v-deep .uni-date-editor--x {
  text-align: right !important;
  padding-right: 5rpx;
}

/* 封面上传控件 */
::v-deep .file-picker__box {
  position: absolute !important;
  right: 0 !important;
  width: 200rpx !important;
  height: 132rpx !important;
}

::v-deep .file-picker__box-content {
  border: none !important;
}

::v-deep .uni-input-placeholder,
::v-deep .uni-select__input-text,
::v-deep .uni-select__input-placeholder,
.join_peo text {
  font-size: 30rpx !important;
  font-weight: 500 !important;
  color: #0e1634 !important;
}

/* 链接 */
.url_class {
  background: red;
  text-align: left;
  width: 702rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1px solid #d6dbe3;
  border: 1px solid #ccc;
}
</style>
